@import 'compass';
@import 'compass/reset';
@import 'compass/css3';

@import "icons/*.png";
@include all-icons-sprites;

@import 'grid/grid';


// //////////////////////
// CONFIG
// //////////////////////

$total_width: 960px;
$container_margin: auto;
$gutter_width: 20px;

$color_yellow: #fff200;
$color_nearlyblack: #252525;
$color_nearlynearlyblack: #454545;
$color_body: #636363;
$color_headlines: #b7b7b7;

$max_width: 960px;

// //////////////////////
// MODULE STYLES
// //////////////////////
@import "examples/modules/global-styles";
@import "examples/modules/overlay";
@import "examples/modules/nav";
@import "examples/modules/header-example";
@import "examples/modules/footer";

header, nav, footer {
	width: 100% !important;
}

header.center, nav .center, footer .center{
	margin: 0 auto;
}

#grid{
	margin-bottom: 0px;
	height: 0px;

	div{
		background: none;
		div{background: black;}
	}
}

article{
	@include clearfix();
}
article div{
	height: 80px;
	background: $color_yellow;
	font-family: 'Raleway', Arial, sans-serif;
	font-weight: 900;
	font-size: 24px;
	text-align: center;
	color: $color_nearlynearlyblack;
	line-height: 80px;
}


///////////////////
// LAYOUT < 720  //
///////////////////

$total_width: 320px;
$container_margin: auto;
$gutter_width: 10px;

@import "examples/modules/global-styles";
@import "examples/modules/overlay";
@import "examples/modules/nav";
@import "examples/modules/header-example";
@import "examples/modules/footer";

@include generate_helper_classes();

article{
	margin-bottom: $gutter_width;
}

h1:after{
	content: " 320";
}

///////////////////
// LAYOUT > 720  //
///////////////////

@media screen and (min-width: 720px) {

	$total_width: 720px;
	$container_margin: auto;
	$gutter_width: 10px;

	@import "examples/modules/global-styles";
	@import "examples/modules/overlay";
	@import "examples/modules/nav";
	@import "examples/modules/header-example";
	@import "examples/modules/footer";
	@include generate_helper_classes();

	article{
		margin-bottom: $gutter_width;
	}

	h1:after{
		content: " 720";
	}
}

///////////////////
// LAYOUT > 960  //
///////////////////

@media screen and (min-width: 960px) {

	$total_width: 960px;
	$container_margin: auto;
	$gutter_width: 20px;

	@import "examples/modules/global-styles";
	@import "examples/modules/overlay";
	@import "examples/modules/nav";
	@import "examples/modules/header-example";
	@import "examples/modules/footer";
	@include generate_helper_classes();

	article{
		margin-bottom: $gutter_width;
	}

	h1:after{
		content: " 960";
	}
}